<!--  -->
<template>
  <div class="padding-20 font-weight-700 whole-box flex-column">
    <div class="flex margin-bottom-20 justify-between align-center title-box">
      <span class="font-size-16 font-weight-700">租赁状况</span>
      <el-date-picker class="no-padding-right-box" style="width: 90px" :clearable="false" size="mini" v-model="searchDate" type="month" placeholder="选择月" @change="changeDate"> </el-date-picker>
    </div>
    <div class="area-box flex align-centers absolute-box">
      <div class="flex-column area-item">
        <template v-if="currentTab == 'leaseSpace'">
          <p class="font-size-18 font-weight-700">{{ tipsObj.signUpRentableArea }}m²</p>
          <p class="color-666666 padding-top-10">已租赁面积</p>
        </template>
        <template v-else-if="currentTab == 'leasePlane'">
          <p class="font-size-18 font-weight-700">{{ tipsObj.rentedNum }}个</p>
          <p class="color-666666 padding-top-10">已租赁数量</p>
        </template>
        <template v-else-if="currentTab == 'useSpace'">
          <p class="font-size-18 font-weight-700">{{ tipsObj.buildingArea }}m²</p>
          <p class="color-666666 padding-top-10">建筑面积</p>
        </template>
        <template v-else>
          <p class="font-size-18 font-weight-700">{{ tipsObj.businessFormNum }}个</p>
          <p class="color-666666 padding-top-10">项目业态</p>
        </template>
      </div>
      <div class="split-line margin-left-right-20"></div>
      <div class="flex-column area-item align-centers">
        <template v-if="currentTab == 'commercialIncome'">
          <p class="font-size-18 font-weight-700">{{ tipsObj.monthlyIncome }}万元</p>
          <p class="color-666666 padding-top-10">本月权责收入</p>
        </template>
        <template v-else-if="currentTab == 'leasePlane'">
          <p class="font-size-18 font-weight-700">{{ tipsObj.rentableNum }}个</p>
          <p class="color-666666 padding-top-10">可租赁数量</p>
        </template>
        <template v-else>
          <p class="font-size-18 font-weight-700">{{ tipsObj.rentableArea }}m²</p>
          <p class="color-666666 padding-top-10">可租赁面积</p>
        </template>
      </div>
    </div>
    <div class="flex tab-box">
      <div class="tab cursor-pointer margin-right-10" :class="item.type == currentTab ? 'active' : 'no-active'" v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">{{ item.lable }}</div>
    </div>
    <div class="flex-1 relative-box">
      <pie v-if="currentTab == 'leaseSpace' && tabList[0].chConfig" key="leaseSpace" ref="leaseSpace" :ch-config="tabList[0].chConfig"></pie>
      <pie v-if="currentTab == 'leasePlane' && tabList[1].chConfig" key="leasePlane" ref="leasePlane" :ch-config="tabList[1].chConfig"></pie>
      <pie v-if="currentTab == 'commercialIncome' && tabList[2].chConfig" key="commercialIncome" ref="commercialIncome" :ch-config="tabList[2].chConfig"></pie>
      <pie v-if="currentTab == 'useSpace' && tabList[3].chConfig" key="useSpace" ref="useSpace" :ch-config="tabList[3].chConfig"></pie>
      <!-- <bar v-show="currentTab == 'commercialIncome'" key="commercialIncome" ref="commercialIncome" :ch-config="tabList[2].chConfig"></bar> -->
      <wave v-show="currentTab == 'leaseSpace' || currentTab == 'leasePlane' || currentTab == 'useSpace'" :rate="rateVal"></wave>
    </div>
  </div>
</template>
<script>
  // operation:运营视图
  import { apiViewbusinessForm, apiViewOperateLease } from '@a/about';
  import * as echartsConfig from '@js/echartsConfig';
  import Bar from '@c/echarts/bar';
  import Pie from '@c/echarts/pie';
  import Wave from './wave';
  import { accMul, accSubtr, formMonthDate, toFixedTwo } from '@/common/js/utils.js';

  export default {
    data() {
      return {
        searchDate: new Date().getTime() - 1000 * 60 * 60 * 24 * 31,
        rateVal: 0,
        rateSpace: 0, //空间出租率中间的wave数值
        rateFlat: 0, //广告位出租率中间的wave数值
        spaceUsageRate: 0, //空间使用率中间的wave数值
        currentTab: 'leaseSpace',
        projectKey: localStorage.getItem('projectKey'),
        projectOptions: [],
        tipsObj: {
          buildingArea: '', //建筑面积
          rentableArea: '', //可租赁面积
          signUpRentableArea: '', //已租赁面积
          monthlyIncome: '', //本月权责收入
          businessFormNum: '', //项目业态
          rentedNum: '', //已租赁数量
          rentableNum: '', //可租赁数量
        },
        tabList: [
          {
            type: 'leaseSpace',
            lable: '空间出租率',
            chConfig: null,
          },
          {
            type: 'leasePlane',
            lable: '广告位出租率',
            chConfig: null,
          },
          {
            type: 'commercialIncome',
            lable: '收入占比', //业态占比(权责)
            chConfig: null,
          },
          {
            type: 'useSpace',
            lable: '空间使用率', //业态占比(权责)
            chConfig: null,
          },
        ],
      };
    },

    methods: {
      //出租率
      async getLease() {
        let res = await apiViewOperateLease({ projectKey: this.projectKey, searchDate: formMonthDate(this.searchDate) });
        // this.rateSpace = accMul(res.rentalSpaceRate.rentalRateSpace || 0, 100).toFixed(2);
        this.rateFlat = accMul(res.rentalFlatRate.rentalRateFlat || 0, 100); //平面
        this.tipsObj.rentedNum = res.rentalFlatRate.rentedNum || 0;
        this.tipsObj.rentableNum = res.rentalFlatRate.rentableNum || 0;
      },

      //业态占比
      async getBusinessForm() {
        let res = await apiViewbusinessForm({ projectKey: this.projectKey, searchDate: formMonthDate(this.searchDate) });
        this.initChartData();
        this.spaceUsageRate = accMul(res.spaceUsageRate || 0, 100).toFixed(2);
        this.tipsObj.buildingArea = res.buildingArea || 0;
        this.tipsObj.rentableArea = res.rentableArea || 0;
        this.tipsObj.signUpRentableArea = res.signUpRentableArea || 0;
        this.tipsObj.monthlyIncome = res.monthlyIncome || 0;
        this.tipsObj.businessFormNum = 0;
        //空间出租率
        res.rentalRateAreaList &&
          res.rentalRateAreaList.forEach(item => {
            item.name = item.businessFormTypeName;
            item.value = accMul(item.rateArea || 0, 100).toFixed(2);
            if (item.value && Number(item.value) > 0) {
              this.tabList[0].chConfig.color.push(item.backgroundColor);
              this.tabList[0].chConfig.list.push(item);
            }

            //空间出租率 (1 - 空置率)
            if (item.businessFormType == 'empty') {
              this.rateSpace = accSubtr(1, item.rateArea || 0);
              this.rateSpace = accMul(this.rateSpace, 100);
            }
            if (this.currentTab == 'leaseSpace') this.rateVal = this.rateSpace;
          });
        //收入占比
        res.rentalRateIncomeList &&
          res.rentalRateIncomeList.forEach(item => {
            item.name = item.businessFormTypeName;
            item.value = accMul(item.rateIncome || 0, 100).toFixed(2);
            if (item.value && Number(item.value) > 0) {
              this.tipsObj.businessFormNum += 1;
              this.tabList[2].chConfig.color.push(item.backgroundColor);
              this.tabList[2].chConfig.list.push(item);
            }
          });
        //空间使用率
        res.spaceUsageRateList &&
          res.spaceUsageRateList.forEach(item => {
            item.name = item.businessFormTypeName;
            item.value = accMul(item.rateArea || 0, 100).toFixed(2);
            if (item.value && Number(item.value) > 0) {
              this.tabList[3].chConfig.color.push(item.backgroundColor);
              this.tabList[3].chConfig.list.push(item);
            }
          });
        await this.$nextTick();
        this.$refs[this.currentTab].initChart();
      },

      //tab切换
      tabChange(item) {
        this.currentTab = item.type;
        if (item.type == 'leaseSpace') {
          this.rateVal = this.rateSpace;
        } else if (item.type == 'leasePlane') {
          this.rateVal = this.rateFlat;
        } else if (item.type == 'useSpace') {
          this.rateVal = this.spaceUsageRate;
        }
        this.$nextTick(() => {
          if (this.$refs[item.type].myChart) {
            this.$refs[item.type].resize();
          } else {
            this.$refs[item.type].initChart();
          }
        });
      },

      //初始化配置
      initChartConfig() {
        let windowWidth = document.body.offsetWidth;
        let config = JSON.parse(JSON.stringify(echartsConfig.pieConfig));
        if (windowWidth <= 1680) {
          config.legend.top = 130;
          config.legend.left = 240;
          config.legend.radius = ['40%', '50%'];
          config.legend.center = [100, '50%'];
          config.legend.height = 230;
        } else if (1680 < windowWidth && windowWidth <= 1920) {
          config.legend.top = 100;
          config.legend.left = 420;
          config.legend.radius = ['70%', '80%'];
          config.legend.center = [180, '50%'];
          config.legend.height = 240;
        }
        this.tabList[0].chConfig = JSON.parse(JSON.stringify(config));
        this.tabList[3].chConfig = JSON.parse(JSON.stringify(config));
        this.tabList[2].chConfig = JSON.parse(JSON.stringify(config));
        this.tabList[1].chConfig = JSON.parse(JSON.stringify(config));
        this.tabList[1].chConfig.legend.show = false;
        this.tabList[1].chConfig.list = [{ value: 100, name: 'default' }];
        this.tabList[1].chConfig.color = ['#f1f1f1'];
      },

      //初始化charts数据
      initChartData() {
        this.tabList.forEach((item, index) => {
          if (index != 1) {
            item.chConfig.color.splice(0, item.chConfig.color.length);
            item.chConfig.list.splice(0, item.chConfig.list.length);
          }
        });
      },

      changeDate() {
        this.getLease();
        this.getBusinessForm();
      },
    },

    mounted() {
      this.initChartConfig();
      if (this.projectKey) {
        this.getLease();
        this.getBusinessForm();
      }
    },

    components: { Bar, Pie, Wave },
  };
</script>
<style scoped lang="scss">
  .title-box {
    height: 28px;
  }
  .tab-box {
    margin-top: -17px;
    .tab {
      width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
    }
  }

  .active {
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .no-active {
    background: rgba($color: #d1cbcb, $alpha: 0.1);
    border-radius: 3px;
    color: #333;
  }
  .whole-box {
    height: 100%;
    background: #fff;
    position: relative;
  }
  .relative-box {
    position: relative;
  }
  .no-padding-right-box {
    ::v-deep .el-input__inner {
      padding-right: 0;
    }
  }

  .area-box {
    .area-item {
      align-items: start;
    }
  }

  @media only screen and (max-width: 1450px) {
    .area-box {
      top: 150px;
      right: 45px;
    }
  }
  @media only screen and (min-width: 1450px) {
    .area-box {
      top: 120px;
      right: 82px;
    }
  }
  .split-line {
    width: 1px;
    height: 40px;
    background: #f1f1f1;
  }
</style>
